<template>
  <a-card title="最新公告">
    <div class="notice-list">
      <div
        class="notice-list-item"
        v-for="(item, index) in noticeList"
        :key="index"
      >
        <div class="item-content">
          <a-tag :color="item.type">
            {{ item.label }}
          </a-tag>
          <div class="msg">
            {{ item.content }}
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup>
import { ref } from "vue";

const noticeList = ref([
  {
    label: "活动",
    type: "processing",
    content: "参与我们的周年庆典，赢取精美礼品！🎁🎈",
  },
  {
    label: "通知",
    type: "warning",
    content: "最新博客文章发布，不要错过！📝✨",
  },
  {
    label: "消息",
    type: "success",
    content: "您的账户已成功升级，享受更多特权！🎉🔑",
  },
  {
    label: "消息",
    type: "success",
    content: "您的账户已经成功开通！🎉🔑",
  },
]);
</script>

<style lang="scss" scoped>
.notice-list-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0;
  cursor: pointer;
  .item-content {
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 0 10px;
    .msg {
      font-size: 14px;
      width: 210px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>